<template>
  <view class="page">
    <Header :title="'抗遗忘复习'"></Header>
    <view class="main_container">
      <view class="main_content">
        <view class="content">
          <view class="tabs">
            <reviewTabs :current="1"></reviewTabs>
            <view class="tabs_list">
              <view
                class="tabs_item"
                :class="{ active: currentIndex === index }"
                v-for="(item, index) in typeList"
                :key="index"
                @click="handleChangeType(index)"
              >
                <text>{{ item.name }}</text>
              </view>
            </view>
          </view>
          <view class="box">
            <view class="top">
              <view class="block1">
                <view class="title">
                  <view></view>
                  <text>整体情况分析</text>
                </view>
                <view class="block1_content">
                  <view class="block1_box">
                    <view class="block1_info">
                      <text>{{ total }}词</text>
                    </view>
                    <view class="block1_text">
                      <text>总刷数</text>
                      <text>击败全市同年级{{ beatPercent }}%学生</text>
                    </view>
                  </view>
                  <view class="block1_box">
                    <view class="block1_info">
                      <text>{{ avgSpeed }}秒/词</text>
                    </view>
                    <view class="block1_text">
                      <text>平均速度</text>
                      <text>击败全市同年级{{ beatSpeedPercent }}%学生</text>
                    </view>
                  </view>
                </view>
              </view>
              <view class="block2">
                <view class="title">
                  <view></view>
                  <text>单词学习分析</text>
                </view>
                <view class="block2_content">
                  <view class="block2_list">
                    <view class="block2_item">
                      <view class="block2_dot"></view>
                      <view class="block2_text">发音测评均分</view>
                      <view class="block2_num">80分</view>
                    </view>
                    <view class="block2_item">
                      <view class="block2_dot"></view>
                      <view class="block2_text">AI阅读测试均分</view>
                      <view class="block2_num">80分</view>
                    </view>
                    <view class="block2_item">
                      <view class="block2_dot"></view>
                      <view class="block2_text">听写考试均分</view>
                      <view class="block2_num">80分</view>
                    </view>
                    <view class="block2_item">
                      <view class="block2_dot"></view>
                      <view class="block2_text">单元测试</view>
                      <view class="block2_num">80分</view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
            <view class="bottom">
              <view class="block3">
                <view class="title">
                  <view></view>
                  <text>测试环比分析</text>
                </view>
                <view class="block3_content">
                  <qiun-data-charts
                    type="column"
                    :opts="opts"
                    :chartData="chartData"
                    background="none"
                  />
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getLtsDetail, getLtsAnalys } from "@/api/sync";
import reviewTabs from "./reviewTabs";

export default {
  components: { reviewTabs },
  data() {
    return {
      chapterId: "",
      total: 0,
      beatPercent: 0,
      avgSpeed: 0,
      beatSpeedPercent: 0,
      lastWordAnalysis: [],
      wordAnalysis: [],
      analysList: [],
      typeList: [
        {
          name: "年",
          type: "1",
        },
        {
          name: "月",
          type: "2",
        },
        {
          name: "日",
          type: "3",
        },
      ],
      currentIndex: 0,
      chartData: {},
      opts: {
        fontColor: "#A7A4A4",
        color: [
          "#1890FF",
          "#91CB74",
          "#FAC858",
          "#EE6666",
          "#73C0DE",
          "#3CA272",
          "#FC8452",
          "#9A60B4",
          "#ea7ccc",
        ],
        padding: [0, 0, 0, 0],
        enableScroll: false,
        legend: {
          position: "top",
        },
        xAxis: {
          disableGrid: true,
        },
        yAxis: {
          data: [
            {
              min: 0,
            },
          ],
        },
        extra: {
          column: {
            type: "group",
            width: 20,
            activeBgColor: "#000000",
            activeBgOpacity: 0.08,
          },
        },
      },
    };
  },
  onLoad(options) {
    this.chapterId = options.chapterId;
    this.getData();
  },
  methods: {
    getData() {
      getLtsDetail(this.chapterId).then((res) => {
        this.total = res.data.total;
        this.beatPercent = res.data.beatPercent;
        this.avgSpeed = res.data.avgSpeed;
        this.beatSpeedPercent = res.data.beatSpeedPercent;
        this.lastWordAnalysis = res.data.lastWordAnalysis;
        this.wordAnalysis = res.data.wordAnalysis;
        this.getChartData();
      });
      this.getAnalys();
    },
    getAnalys() {
      getLtsAnalys({
        chapterId: this.chapterId,
        type: this.typeList[this.currentIndex].type,
      }).then((res) => {
        this.analysList = res.data;
      });
    },
    handleChangeType(index) {
      if (this.currentIndex == index) return;
      this.currentIndex = index;
      this.getAnalys();
    },
    getChartData() {
      let res = {
        categories: ["听", "说", "读", "写", "练", "测", "考"],
        series: [
          {
            name: "本次分数",
            data: this.wordAnalysis.map((item) => item.scope),
          },
          {
            name: "上次分数",
            data: this.lastWordAnalysis.map((item) => item.scope),
          },
        ],
      };
      this.chartData = JSON.parse(JSON.stringify(res));
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./review2Detail";
</style>
